<template>
  <!-- 会员分析 -->
  <div class="page-member-analysis">
    <div class="board">
      <!-- 统计时间 -->
      <div class="base-section">
        <DateTypeSelect
          :date-options="dateOptions"
          :date-type="dateType"
          @date-change="onDateChange"
        />
      </div>

      <!-- 会员概览 -->
      <Overview
        ref="overview"
        :board-type="'overview'"
        :date-type="dateType"
        :date-range="dateRange"
      />
    </div>

    <div class="board">
      <!-- 会员人数趋势 -->
      <Overview
        ref="numTrends"
        :board-type="'numTrends'"
        :date-type="dateType"
        :date-range="dateRange"
      />
    </div>

    <div class="board">
      <!-- 会员占比趋势 -->
      <Overview
        ref="percentageTrend"
        :board-type="'percentageTrend'"
        :date-type="dateType"
        :date-range="dateRange"
      />
    </div>

    <div class="board">
      <!-- 会员贡献价值分析 -->
      <ContributedValue
        ref="memberContribution"
        :date-type="dateType"
        :date-range="dateRange"
      />
    </div>

    <div class="board">
      <!-- 新老会员成交分析 -->
      <Transaction
        ref="transaction"
        :date-type="dateType"
        :date-range="dateRange"
      />
    </div>

    <div class="profile-trends-mod">
      <!-- 客户留存分析 -->
      <CustomerProfile ref="retention" />
    </div>
  </div>
</template>

<script setup>
import DateTypeSelect from '../components/date-type-select.vue'
import Overview from './components/overview.vue'
import ContributedValue from './components/contributed-value.vue'
import Transaction from './components/transaction.vue'
import CustomerProfile from './components/customer-profile.vue'
// 时间类型列表
const dateOptions = [
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  }
]

const dateType = ref(5)
const dateRange = ref([])
const onDateChange = (data) => {
  dateType.value = data.timeType
  dateRange.value = data.dateRange
}

</script>

<style lang="scss" scoped>
.page-member-analysis {
  display: block;
  width: 100%;
  background: #f1f4f5;
  .base-section {
    padding: 10px;
    background-color: #f7f8fa;
    margin-bottom: 16px;
  }
  .board {
    display: block;
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
  }
  .profile-trends-mod {
    display: block;
    width: 100%;
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
  }
}
</style>
